import React from 'react';
import '../../style/index/Home.scss'
import axios from 'axios'
import { useEffect, useState } from 'react'
import ReactECharts from 'echarts-for-react';
// echarts
import * as echarts from 'echarts';
import Echarts from '../../componets/Echarts'
import { HomeOutlined } from '@ant-design/icons';
import { query_hometotal, home_class, home_college, home_xian } from '../../utils/apileave'

function Home(props) {
  var [total, setTotal] = useState([])
  var [myclass, setMyclass] = useState([])
  var [college, setCollege] = useState([])
  var [xianlist, setXianlist] = useState([])
  useEffect(() => {
    // 折线图部分
    // 在组件的挂载期去获取DOM节点
    var chartDom = document.getElementById('mains');
    var myChart = echarts.init(chartDom);
    // 请求学校总人数hometotal
    query_hometotal().then((res) => {
      console.log("封装", res)
      setTotal(res.data[0])
      // console.log(total)
    })
    // 请求班级数据
    home_class().then((res) => {
      console.log("班级数据", res.data[0])
      setMyclass(res.data[0])
    })
    // 请求学校二级学院人数占比
    home_college().then((res) => {
      console.log("二级学院占比", res.data)
      setCollege(res.data)
    })
    // 请求西安疫情数据
    home_xian().then((res) => {
      console.log("西安", res)
      setXianlist(res.data[0])
      // 折线图部分
      // 在组件的挂载期去获取DOM节点
      var chartDom = document.getElementById('mains');
      var myChart = echarts.init(chartDom);

      myChart.setOption({
        title: {
          text: '西安疫情变化趋势'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['治愈', '隔离', '无症状', '确诊']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
        },
        yAxis: {
          type: 'value',

        },
        series: [
          {
            name: '治愈',
            type: 'line',
            stack: 'Total',
            data: res.data[0].cure
          },
          {
            name: '无症状',
            type: 'bar',
            stack: 'Total',
            data: res.data[0].asymptomatic
          },
          {
            name: '隔离',
            type: 'bar',
            stack: 'Total',
            data: res.data[0].quarantine
          },
          {
            name: '确诊',
            type: 'line',
            stack: 'Total',
            data: res.data[0].diagnosis
          },
          {
            name: '死亡',
            type: 'bar',
            stack: 'Total',
            data: res.data[0].death
          }
        ]
      });
    })

    // 玫瑰图
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    myChart.setOption(
      {
        legend: {
          top: 'bottom'
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        series: [
          {
            name: 'Nightingale Chart',
            type: 'pie',
            radius: [30, 180],
            center: ['50%', '50%'],
            roseType: 'area',
            itemStyle: {
              borderRadius: 8
            },
            data: [
              { value: 40, name: '信工学院' },
              { value: 38, name: '文教学院' },
              { value: 32, name: '商学院' },
              { value: 30, name: '管理学院' },
              { value: 28, name: '中职校' },
              { value: 26, name: '医药学院' },
              { value: 22, name: '珠宝学院' },
              { value: 18, name: '继教学院' }
            ]
          }
        ]
      }

    )
    // 折线图部分
    // 在组件的挂载期去获取DOM节点
    var chartDom = document.getElementById('mains');
    var myChart = echarts.init(chartDom);

    myChart.setOption({
      title: {
        text: '西安疫情变化趋势'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['治愈', '隔离', '无症状', '确诊']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月']
      },
      yAxis: {
        type: 'value',

      },
      series: [
        {
          name: '治愈',
          type: 'line',
          stack: 'Total',
          data: xianlist.cure
        },
        {
          name: '无症状',
          type: 'line',
          stack: 'Total',
          data: xianlist.cure ? xianlist.asymptomatic : ''
        },
        {
          name: '隔离',
          type: 'bar',
          stack: 'Total',
          data: xianlist.cure ? xianlist.quarantine : ''
        },
        {
          name: '确诊',
          type: 'line',
          stack: 'Total',
          data: xianlist.cure ? xianlist.diagnosis : ''
        },
        {
          name: '死亡',
          type: 'bar',
          stack: 'Total',
          data: xianlist.cure ? xianlist.death : ''
        }
      ]
    });
  }, [])
  // // 图表部分
  var titlelist = { name: "疫情实时情况一览", type: ["bar"] }
  var datalist = { datas: [{ data: [50, 45, 5, 1], name: '班级情况' }], xAxis: ["班级人数", "绿码", "隔离", "确诊"] }

  // 折线图部分
  // 监听xianlist数组中的数据有值时去渲染一下
  useEffect(() => {
    console.log("改变了")
  }, [xianlist])



  return (
    <div className='home'>
      <div className='title'><h3> <HomeOutlined />  我的桌面</h3></div>
      <div className='name'>
        <div className='texts'>
          欢迎您：<span>超级管理员</span> !
        </div>
      </div>
      <div className='box3'>
        <div className='box1 '>
          <div>学生总数</div>
          <div>
            {
              total.diagnosis ? total.total : ""
            }
          </div>
        </div>
        <div className='box1 box11'>
          <div>绿码人数</div>
          <div>{
            total.diagnosis ? total.healthy : ""
          }</div>
        </div>
        <div className='box1 box2'>
          <div>隔离人数</div>
          <div>{
            total.diagnosis ? total.quarantine : ""
          }</div>
        </div>
        <div className='box1 box3'>
          <div>确诊人数</div>
          <div>{
            total.diagnosis ? total.diagnosis : ""
          }</div>
        </div>
      </div >
      <div className='list' style={{ paddingLeft: 200 }}>
        <div className='echats1'>
          <div className='test'><i>疫情当下，事无大小，做好防护，努力拼搏</i> </div>
          <div className='test2'><i>疫情防护不关是对自己负责，更是对同学对班级的负责！</i> </div>
          <Echarts titlelist={titlelist} datalist={datalist} />
        </div>
        <div className='echats2' id='main'>
        </div>
      </div>
      <div className='lien' style={{ paddingLeft: 100 }} id='mains'>

      </div>
    </div>
  );
}

export default Home;